<template>
  <div class="top" >

    <div class="top">
      <div style="display: flex; justify-content: space-between;overflow: hidden">
        <div id="maxMoneyChart" style="width: 400px; height: 250px;"></div>
        <div id="lineChar" style="width: 400px; height: 250px;"></div>
      </div>
    </div>

    <div class="top">
      <div style="display: flex; justify-content: space-between;">
        <div id="webChar" style="width: 400px; height: 250px;"></div>
        <div id="webChar1" style="width: 400px; height: 250px;"></div>
      </div>
    </div>

    <el-table
        :data="permissionRelations"

        border
        style="width: 100%;margin: 10px 0">

      <el-table-column  prop="projectId" label="项目号"></el-table-column>

      <el-table-column prop="projectName" label="项目名称"></el-table-column>

      <el-table-column prop="createTime" label="工地面积"></el-table-column>

      <el-table-column prop="numberOfPeople" label="建筑数量"></el-table-column>

      <el-table-column prop="status" label="塔机数量"></el-table-column>


    </el-table>






<!-- 此处注释了项目完成情况-->
<!--<div>-->
<!--      <div style="text-align:center">-->
<!--        &lt;!&ndash; 项目完成情况数据显示&ndash;&gt;-->
<!--      <el-col :span="4">-->
<!--        <div>-->
<!--          <el-statistic-->
<!--              group-separator=","-->
<!--              :precision="2"-->
<!--              :value="value1"-->
<!--              title="未完成工地项目数量"-->
<!--          ></el-statistic>-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :span="4">-->
<!--        <div>-->
<!--          <el-statistic-->
<!--              group-separator=","-->
<!--              :precision="2"-->
<!--              :value="value2"-->
<!--              title="已完成工地项目数量">-->
<!--          </el-statistic>-->
<!--        </div>-->
<!--      </el-col>-->
<!--      </div>-->
<!--</div>-->





  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      // 完成与未完成工地项目数量
      like: true,
      value1: 4154.564,
      value2: 1314,
      permissionRelations: [
        { projectId: '001',projectName: '工地项目1', createTime: 2000, numberOfPeople: 3, status: 4 },
        { projectId: '002',projectName: '工地项目2', createTime: 3000, numberOfPeople: 4, status: 5 },
        { projectId: '003',projectName: '工地项目3', createTime: 4000, numberOfPeople: 5, status: 5 },
        { projectId: '003',projectName: '工地项目3', createTime: 4000, numberOfPeople: 5, status: 5 },
        { projectId: '003',projectName: '工地项目3', createTime: 4000, numberOfPeople: 5, status: 5 },
        { projectId: '003',projectName: '工地项目3', createTime: 4000, numberOfPeople: 5, status: 5 },

        // Add more data as needed
      ],
      // 项目统计柱形图
      maxMoneyData: {
        title: {
          text: '项目统计',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '1%',
          bottom: '1%',
          containLabel: true
        },
        xAxis: {
          data: ['机电工程','','建筑工程','','水电工程','','土木工程'],
          axisLabel: {
            fontSize: 10,
            minInterval: 1
          },
        },
        yAxis: {
          name:'',
          type: 'value',
          minInterval: 3 //最小步长
        },
        series: [
          {
            data: [300,200,600,1000,500,600,150],
            type: 'bar'
          }
        ]
      },
      //折线图数据
      option : {
        title: {
          text: '项目变化',
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['新增工地项目', '新增塔机']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月',]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '新增工地项目',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210,300,258,456,157,161]
          },
          {
            name: '新增塔机',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310,784,459,781,584,126]
          }
        ]
      },
      // //项目预算
      // option1 :{
      //   color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
      //   title: {
      //     text: '项目预算'
      //   },
      //   tooltip: {
      //     trigger: 'axis',
      //     axisPointer: {
      //       type: 'cross',
      //       label: {
      //         backgroundColor: '#6a7985'
      //       }
      //     }
      //   },
      //   legend: {
      //     data: ['小型项目', '中型项目','大型项目']
      //   },
      //   toolbox: {
      //     feature: {
      //       saveAsImage: {}
      //     }
      //   },
      //   grid: {
      //     left: '3%',
      //     right: '4%',
      //     bottom: '3%',
      //     containLabel: true
      //   },
      //   xAxis: [
      //     {
      //       type: 'category',
      //       boundaryGap: false,
      //       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      //     }
      //   ],
      //   yAxis: [
      //     {
      //       type: 'value'
      //     }
      //   ],
      //   series: [
      //     {
      //       name: '小型项目',
      //       type: 'line',
      //       stack: 'Total',
      //       smooth: true,
      //       lineStyle: {
      //         width: 0
      //       },
      //       showSymbol: false,
      //       areaStyle: {
      //         opacity: 0.8,
      //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //           {
      //             offset: 0,
      //             color: 'rgb(128, 255, 165)'
      //           },
      //           {
      //             offset: 1,
      //             color: 'rgb(1, 191, 236)'
      //           }
      //         ])
      //       },
      //       emphasis: {
      //         focus: 'series'
      //       },
      //       data: [140, 232, 101, 264, 90, 340, 250]
      //     },
      //     {
      //       name: '中型项目',
      //       type: 'line',
      //       stack: 'Total',
      //       smooth: true,
      //       lineStyle: {
      //         width: 0
      //       },
      //       showSymbol: false,
      //       areaStyle: {
      //         opacity: 0.8,
      //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //           {
      //             offset: 0,
      //             color: 'rgb(0, 221, 255)'
      //           },
      //           {
      //             offset: 1,
      //             color: 'rgb(77, 119, 255)'
      //           }
      //         ])
      //       },
      //       emphasis: {
      //         focus: 'series'
      //       },
      //       data: [120, 282, 111, 234, 220, 340, 310]
      //     },
      //     {
      //       name: '大型项目',
      //       type: 'line',
      //       stack: 'Total',
      //       smooth: true,
      //       lineStyle: {
      //         width: 0
      //       },
      //       showSymbol: false,
      //       areaStyle: {
      //         opacity: 0.8,
      //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //           {
      //             offset: 0,
      //             color: 'rgb(55, 162, 255)'
      //           },
      //           {
      //             offset: 1,
      //             color: 'rgb(116, 21, 219)'
      //           }
      //         ])
      //       },
      //       emphasis: {
      //         focus: 'series'
      //       },
      //       data: [320, 132, 201, 334, 190, 130, 220]
      //     },
      //
      //
      //   ]
      // },
      //项目地区分布
      //饼状图
      //项目地区分布
      Website :{
        title: {
          text: '项目地区分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '上海' },
              { value: 735, name: '北京' },
              { value: 580, name: '广东' },
              { value: 484, name: '湖北' },
              { value: 300, name: '福建' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      //年龄分布
      peopleAge : {
        title:{
          text:'年龄分布图',
          left:'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '18-29岁' },
              { value: 735, name: '30-40岁' },
              { value: 580, name: '41-50岁' },
              { value: 484, name: '51-60岁' },
              { value: 300, name: '61-65岁' }
            ]
          }
        ]
      }
    }
  },

  mounted() {
    // 柱形图钩子函数
    const myChart = echarts.init(document.getElementById('maxMoneyChart'));
    myChart.setOption(this.maxMoneyData);
    //折线图
    const myChart1 = echarts.init(document.getElementById('lineChar'));
    myChart1.setOption(this.option);
    //项目预算
    // const myChart2 = echarts.init(document.getElementById('lineChar1'));
    // myChart2.setOption(this.option1);
    //饼状图
    const myChart3 = echarts.init(document.getElementById('webChar'));
    myChart3.setOption(this.Website);
    //年龄饼状图
    const myChart4 = echarts.init(document.getElementById('webChar1'));
    myChart4.setOption(this.peopleAge);

  }
};
</script>

<style>

.top {
  /*课程信息边框样式*/
  padding: 10px 10px;
  background-color: rgba(255, 255, 255,0.7);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

</style>

